<template>
	<div class="padding-container preview-wrap">
		<div class="title-part">
      <el-button size="mini" type="primary" class="pull-right" @click="toCreate()" v-show="showBtn">{{ $root.lang.control.app.list.add }}</el-button>
		</div>
		<el-form ref="tableParams" :inline="true" :model="tableParams" size="small">
      <el-form-item :label="$root.lang.control.app.list.appName">
        <el-input v-model="tableParams.appName"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.app.list.appVersion">
        <el-input v-model="tableParams.appVersion"></el-input>
      </el-form-item>
      <el-form-item :label="$root.lang.control.app.list.deviceType">
        <el-select v-model="tableParams.deviceType" :placeholder="$root.lang.control.app.list.select" clearable>
          <el-option :label="item.typeName" :value="item.typeCode" :key="item.typeCode" v-for="item in deviceTypeList"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$root.lang.control.app.list.isPublic">
        <el-select v-model="tableParams.isPublic" :placeholder="$root.lang.control.app.list.select" clearable>
          <el-option :label="item.title" :value="item.value" :key="item.value" v-for="item in baseState.isPublic"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$root.lang.control.app.list.auditState">
        <el-select v-model="tableParams.auditState" :placeholder="$root.lang.control.app.list.select" clearable>
          <el-option :label="item.title" :value="item.value" :key="item.value" v-for="item in baseState.appAuditState"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$root.lang.control.app.list.delFlag">
        <el-select v-model="tableParams.priDelFlag" :placeholder="$root.lang.control.app.list.select">
          <el-option :label="item.title" :value="item.value" :key="item.value" v-for="item in baseState.delFlag"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchAction()" >{{ $root.lang.control.app.list.query }}</el-button>
        <el-button size="small" @click="searchAction(true)" >{{ $root.lang.control.app.list.empty }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="appList"
      :empty-text="$root.lang.control.app.list.noData"
      size="small"
      border
      style="width: 100%"
      :header-cell-style="{'text-align':'center'}"
      >
      <el-table-column
        width="150"
        align="center"
        :label="$root.lang.control.app.list.appName">
        <template slot-scope="scope">
          <span>{{ scope.row.appName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        align="center"
        :label="$root.lang.control.app.list.appIdentification">
        <template slot-scope="scope">
          <span>{{ scope.row.appIdentification }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.app.list.appVersion">
        <template slot-scope="scope">
          <span>{{ scope.row.appVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="90"
        align="center"
        :label="$root.lang.control.app.list.appV">
        <template slot-scope="scope">
          <span>{{ scope.row.appV }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="240"
        align="center"
        :label="$root.lang.control.app.list.appMainClass">
        <template slot-scope="scope">
          <span>{{ scope.row.appMainClass }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.app.list.deviceType">
        <template slot-scope="scope">
          <p>{{ scope.row.typeName }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.app.list.isPublic">
        <template slot-scope="scope">
          <p>{{ baseState.isPublic, scope.row.isPublic, "--" | matchValue }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.app.list.auditState">
        <template slot-scope="scope">
          <p>{{ baseState.appAuditState, scope.row.auditState, "--" | matchValue }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$root.lang.control.app.list.creUser">
        <template slot-scope="scope">
          <span v-if="scope.row.isPublic == 0">{{ scope.row.userName }}</span>
          <span v-else-if="scope.row.isPublic == 1">{{ scope.row.publicUserName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        align="center"
        :label="$root.lang.control.app.list.creTime">
        <template slot-scope="scope">
          <span v-if="scope.row.isPublic == 0">{{ scope.row.creTime | dateFormat }}</span>
          <span v-else-if="scope.row.isPublic == 1">{{ scope.row.publicCreTime | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :width="operateWidth"
        :align="align"
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="toDetail(scope.$index, scope.row)">{{ $root.lang.control.app.list.look }}</el-button>
          <el-button
            size="mini"
            type="danger"
            v-show="scope.row.priDelFlag == 0 && showBtn"
            @click="toDelete(scope.$index, scope.row)">{{ $root.lang.control.app.list.delete }}</el-button>
          <el-button
            size="mini"
            type="primary"
            v-show="scope.row.priDelFlag == 0 && scope.row.isPublic == 0 && (scope.row.auditState == 0 || scope.row.auditState == null) && showBtn"
            @click="toPublic(scope.$index, scope.row)">{{ $root.lang.control.app.list.public }}</el-button>
          <el-button
            size="mini"
            type="primary"
            v-show="scope.row.priDelFlag == 0 && showBtn && showVisual"
            @click="toBind(scope.$index, scope.row)">{{ $root.lang.control.app.list.bind }}</el-button>
          <el-button
            size="mini"
            type="primary"
            v-show="scope.row.priDelFlag == 0 && scope.row.webId != null && showBtn"
            @click="toPreview(scope.$index, scope.row)">{{ $root.lang.control.app.list.preview}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableTotal>0"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="pageChange"
      @next-click="pageChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[10, 30, 50, 100]"
      :page-size="tableParams.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="tableTotal">
    </el-pagination>

    <AppEdit :show="showEdit" @editReceive="getReceive" @reload="reloadTable" />
    <VisualBind :show="showBind" :appId="appId + ''" :webId="webId + ''" @editReceive="getReceive" @reload="reloadTable" />
	</div>
</template>

<script>
import AppEdit from './components/appEdit';
import VisualBind from './components/visualBind';
import '@/options/baseState'
export default {
	name: 'AppList',
  components: {
    AppEdit, VisualBind
  },
	data() {
		return {
			showDialog:false,
			tableParams:{
				pageNum: 1,
				pageSize: 10,
				appVersion: null,
        appName: null,
        priDelFlag: 0,
        auditState: null,
        isPublic: null,
        deviceType: null,
        isNative: 0,
        isInner: true,
			},
			listLoading:false,
      appList:[],
      tableTotal:0,
      showEdit:false,
      showBind:false,
      baseState: {},
      align: 'left',
      deviceTypeList: [],
      showBtn: true,
      appId: '',
      webId: '',
      showVisual: false,
      operateWidth: 370
		}
	},
  methods: {
    getReceive(data) {
      this[data.key] = data.value
    },
    toCreate() {
      this.showEdit = true
    },
    reloadTable() {
      this.searchAction(true);
    },
    toDetail(index,row) {
      this.$router.push({ name:'PrivateDetail', params:{ id: row.id } })
    },
    sizeChange(val) {
      this.tableParams.pageNum = 1
      this.tableParams.pageSize = val
      this.fetchData()
    },
    pageChange(val) {
      this.tableParams.pageNum = val
      this.fetchData()
    },
    toDelete(index, row) {
      this.$confirm(this.$root.lang.confirm.deleteApp, this.$root.lang.confirm.tips, {
        confirmButtonText: this.$root.lang.confirm.deleteImmediately,
        cancelButtonText: this.$root.lang.confirm.noDeletion,
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$root.lang.confirm.process,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.request({
          url: '/application/private/del/' + row.id,
          method: 'get',
        }).then(response => {
          loading.close()
          this.$message({
            message: this.$root.lang.confirm.operateSuccess+this.$root.lang.confirm.appDelete,
            type: 'success',
            duration: 3 * 1000
          })
          this.searchAction()
        }).catch(error => {
          loading.close()
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
        })
      }).catch(() => {
        
      })
    },
    checkBlockChain(row) {
      
    },
    toPublic(index, row) {
      this.$confirm(this.$root.lang.confirm.publicApp, this.$root.lang.confirm.tips, {
        confirmButtonText: this.$root.lang.confirm.publicImmediately,
        cancelButtonText: this.$root.lang.confirm.noPublic,
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: this.$root.lang.confirm.process,
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let param = {
          url: row.appUrl
        }
        this.request({
          url: '/blockchain/secretkey/setting/exist',
          method: 'post',
          data: this.$root.optionProcess(param)
        }).then(response => {
          // 区块链应用不允许被公开
          if(response.result) {
            loading.close()
            this.$message({
              message: this.$root.lang.confirm.publicErrorTip,
              type: 'error',
              duration: 3 * 1000
            })
          } else {
            this.request({
              url: '/application/private/pub/' + row.id,
              method: 'get',
            }).then(response => {
              loading.close()
              this.$message({
                message: this.$root.lang.confirm.operateSuccess + this.$root.lang.confirm.publicTip,
                type: 'success',
                duration: 3 * 1000
              })
              this.searchAction(true)
            }).catch(error => {
              loading.close()
              this.$message({
                message: error.errmsg,
                type: 'error',
                duration: 3 * 1000
              })
            })
          }
        }).catch(error => {
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
        })
      })
    },
    searchAction(reset) {
      if(reset) {
        this.tableParams = {
          pageNum: 1,
          pageSize: 10,
          appVersion: null,
          appName: null,
          priDelFlag: 0,
          auditState: null,
          isPublic: null,
          deviceType: null,
          isNative: 0,
          isInner: true,
        }
      } else {
        this.tableParams.pageNum = 1
      }
      this.fetchData()
      if(this.tableParams.priDelFlag == 0) {
        if(!this.showBtn) {
          this.align = 'center'
        } else {
          this.align = 'left'
        }
      } else {
        this.align = 'center'
      }
    },
    fetchData() {
      this.listLoading = true
      this.request({
          url: '/application/private/page',
          method: 'post',
          data: this.$root.optionProcess(this.tableParams)
        }).then(response => {
          this.appList = response.rows
          this.tableTotal = response.total
          this.listLoading = false
        }).catch(error => {
          this.appList = []
          this.listLoading = false
          this.$message({
            message: error.errmsg,
            type: 'error',
            duration: 3 * 1000
          })
      })
    },
    checkLang() {
      let langType = this.$root.getStorage('lang')
      if(langType == 'en') {
        this.baseState = enBaseState
      } else {
        this.baseState = baseState
      }
    },
    getDeviceType() {
      this.request({
        url: '/device/type/list',
        method: 'post',
        data: this.$root.optionProcess({
          delFlag: 0
        })
      }).then(response => {
        this.deviceTypeList = response.result
      }).catch(error => {
        this.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
    toBind(index, row) {
      this.showBind = true
      this.appId = row.id
      this.webId = row.webId
    },
    toPreview(index, row) {
      window.open(this.Options.links.visual + 'preview' + '?A=' + this.store.getters.status + '&I=' + row.webId)
    }
  },
  created() { 
    this.showVisual = this.Cookies.get('V') == 3 ? true : false
    if(this.showVisual) {
      this.operateWidth = 360
    } else {
      this.operateWidth = 220
    }
    if(this.Cookies.get('T') == '2') {
      if(this.Cookies.get('O') == '1') {
        this.showBtn = false
        // this.showBtn = true
        // this.operateWidth = 360
        this.align = 'center'
        this.operateWidth = 150
      }
		}
    this.getDeviceType()
    this.checkLang()
    this.fetchData()
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		text-align:left;
		.title-part {
			text-align: left;
			font-size: 18px;
			padding-bottom: 40px;
		}
	}
</style>